<template>
  <section class="whaleyvr-container">
    <div
      class="flow-container"
      ref="jsFlowContainer"
    > 
      <company :class="['whaleyvr-scene', { 'slide': carousel.currentIndex >= 0 }]" v-if="isInit || carousel.currentIndex >= 0">
        <a
          href="javascript:;"
          class="next"
          v-if="carousel.currentIndex >= 0 && carousel.currentIndex < 4"
        ></a>          
      </company>
      <div class="whaleyvr-scene">
        <live :class="[{ 'slide': carousel.currentIndex >= 0 }]" v-if="isInit || carousel.currentIndex >= 0">
          <a
            slot="next"
            href="javascript:;"
            class="next"
            v-if="carousel.currentIndex >= 1 && carousel.currentIndex < 4"
          ></a>          
        </live>
     </div>
      <div class="whaleyvr-scene">
        <vr-ip :class="{ 'slide': carousel.currentIndex >= 1 }" v-if="isInit || carousel.currentIndex >= 1">
          <a
            slot="next"
            href="javascript:;"
            class="next"
            v-if="carousel.currentIndex >= 2 && carousel.currentIndex < 4"
          ></a>        
        </vr-ip>
      </div>
      <div class="whaleyvr-scene">
        <partners :class="{ 'slide': carousel.currentIndex >= 2 }" v-if="isInit || carousel.currentIndex >= 2"></partners>
        <a
          href="javascript:;"
          class="next"
          v-if="carousel.currentIndex >= 3 && carousel.currentIndex < 4"
        ></a>
      </div>
      <div class="whaleyvr-scene">
        <contact :class="{ 'slide': carousel.currentIndex >= 3 }" v-if="isInit || carousel.currentIndex >= 3"></contact>
        <a
          href="javascript:;"
          class="next"
          v-if="carousel.currentIndex < 4"
        ></a>
      </div>
    </div>       
  </section>
</template>

<script>
  import Hammer from 'hammerjs'
  import HammerCarousel from './assets/js/HammerCarousel'
  import Carousel from './components/carousel'
  import Live from './components/LiveVR'
  import Company from './components/Company'
  import VrIp from './components/IpVR'
  import Partners from './components/VRPartners'
  import Contact from './components/contactVR'
  import pic1 from './assets/swipe/vr-live-slide1.jpg'
  import pic2 from './assets/swipe/vr-live-slide2.jpg'
  import pic3 from './assets/swipe/vr-live-slide3.jpg'
  import pic4 from './assets/swipe/vr-live-slide4.jpg'
  import picWebp1 from './assets/swipe/vr-live-slide1.webp'
  import picWebp2 from './assets/swipe/vr-live-slide2.webp'
  import picWebp3 from './assets/swipe/vr-live-slide3.webp'
  import picWebp4 from './assets/swipe/vr-live-slide4.webp'

  export default {
    name: 'app',
    data () {
      return {
        itemCount: 5,
        isInit: false,
        carousel: {
          currentIndex: 0
        },
        livePics: [
          {
            'jpg': pic1,
            'webp': picWebp1,
            'text': '你与王菲只差一个微鲸VR'
          },
          {
            'jpg': pic2,
            'webp': picWebp2,
            'text': '近距离深度感受老罗情怀'
          },
          {
            'jpg': pic3,
            'webp': picWebp3,
            'text': '全天候3D直播精彩不停'
          },
          {
            'jpg': pic4,
            'webp': picWebp4,
            'text': '微鲸VR带你隔空pogo'
          }
        ]
      }
    },
    components: {
      Live,
      Company,
      VrIp,
      Partners,
      Contact,
      Carousel
    },
    mounted () {
      this.slideContainer = this.$refs.jsFlowContainer
      /* eslint-disable no-new */
      this.carousel = new HammerCarousel(this.slideContainer, Hammer.DIRECTION_VERTICAL)
    }
  }
</script>
<style lang="scss" scoped>
  .whaleyvr-container {
    position: relative;
    width: 100%;
    height: 200vh;
  }
  .flow-container {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    &.animate {
      .whaleyvr-scene {
        transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
        transition-duration: 1200ms;         
      }
    }
  }
  .whaleyvr-scene {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    &:nth-child(2) {
      transform: translate3d(0px, 100%, 0px);
    }
  }
  .whaleyVR {
    height: 100%;
    padding: .5rem 0 0;
    background: url('./assets/images/page-other-bg.png') no-repeat .1rem .35rem;
    background-size: 98% auto;
    &.index.slide {
      display: block;
      animation: show 1000ms linear;
    }
  }
  .next {
    position: absolute;
    display: block;
    z-index: 10;
    left: 0;
    bottom: .5rem;
    width: 100%;
    height: .9rem;
    background: url('./assets/images/arrow.png') no-repeat center;
    background-size: 1.01rem .9rem;
    animation: flashing 1500ms ease-out;
    animation-iteration-count: 3;
    animation-fill-mode: forwards;
  }
  @keyframes show {
    0% {
      transform: translate(-50%, 0);
    }
 
    100% {
      transform: translate(0, 0)
    }
  }
  @keyframes flashing {
    0% {
      background-size: 1.01rem .9rem;
      opacity: 1;
    }
    100% {
      background-size: 0 0;
      opacity: 0;
    }
  }
</style>
<style lang="scss">
  @import "./assets/styles/common.scss";
</style>
